{% extends "scm/base.html" %}
{% load static %}

{% block content %}

<style>
    .table .table-dark th {
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(70, 80, 87);
    }

    .table thead th {
        vertical-align: middle;
    }

    .add-button {
        background-color: rgb(80, 90, 97);
        color: white;
        border: none;
    }

    .add-button:hover {
        background-color: rgb(70, 80, 87);
        color: white;
    }

    .table-container {
        overflow-x: auto;
        margin-top: 1rem;
    }

    .go-page-input {
        width: 65px;
        text-align: center;
    }

    /* STANDARD PETROGL PAGINATION */
    .pagination .page-link {
        color: #495057 !important;
        border-color: #6c757d !important;
        background-color: #ffffff !important;
    }

    .pagination .page-link:hover,
    .pagination .page-link:focus {
        color: #343a40 !important;
        background-color: #f1f3f5 !important;
        border-color: #6c757d !important;
        box-shadow: none !important;
    }

    .pagination .page-item.active .page-link {
        color: #ffffff !important;
        background-color: rgb(80, 90, 97) !important;
        border-color: rgb(80, 90, 97) !important;
    }

    .pagination .page-item.disabled .page-link {
        color: #6c757d !important;
        background-color: #ffffff !important;
        border-color: #6c757d !important;
    }
</style>

<div class="container-fluid py-3">

    <!-- =====================================================
         HEADER
         ===================================================== -->

    <div class="d-flex justify-content-between align-items-center mb-3">

        <div>

            <h4 class="mb-1">
                Manage Material / KIMAP
            </h4>

            <small class="text-muted">
                Material Master / KIMAP
            </small>

        </div>


        <div class="d-flex gap-2">

            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#kimapModal"
                onclick="newKIMAP()">
                <i class="bi bi-plus-circle"></i>
                Add Material
            </button>


            <a href="{% url 'export_to_excel_kimap' %}" class="btn btn-secondary">
                <i class="bi bi-file-earmark-excel"></i>
                Export
            </a>


            <button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#importModal">
                <i class="bi bi-upload"></i>
                Import
            </button>


            <a href="{% url 'generate_pdf_kimap' %}?search={{ search_query|urlencode }}" class="btn btn-danger"
                target="_blank">
                <i class="bi bi-file-earmark-pdf"></i>
                PDF
            </a>

        </div>

    </div>


    <!-- =====================================================
         SEARCH
         ===================================================== -->

    <form method="get" class="mb-3">

        <div class="input-group">

            <input type="text" name="search" value="{{ search_query }}" class="form-control"
                placeholder="Search Classification, Category, KIMAP, Name, Location...">

            <button class="btn btn-outline-secondary" type="submit">
                <i class="bi bi-search"></i>
                Search
            </button>

            {% if search_query %}

            <a href="{% url 'kimap' %}" class="btn btn-outline-secondary">
                Clear
            </a>

            {% endif %}

        </div>

    </form>


    <!-- =====================================================
         MESSAGES
         ===================================================== -->

    {% if messages %}

    {% for message in messages %}

    <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">

        {{ message }}

        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>

    </div>

    {% endfor %}

    {% endif %}


    <!-- =====================================================
         TABLE
         ===================================================== -->

    <div class="card shadow-sm">

        <div class="card-body p-0">

            <div class="table-responsive">

                <table class="table table-sm table-striped table-hover table-bordered mb-0">

                    <thead class="table-dark">

                        <tr>

                            <th class="text-center">
                                No
                            </th>

                            <th>
                                Classification
                            </th>

                            <th>
                                Category
                            </th>

                            <th>
                                KIMAP
                            </th>

                            <th>
                                Name
                            </th>

                            <th class="text-end">
                                Qty
                            </th>

                            <th>
                                UOM
                            </th>

                            <th class="text-end">
                                Price USD
                            </th>

                            <th class="text-end">
                                Total USD
                            </th>

                            <th>
                                Location
                            </th>

                            <th>
                                Short Name
                            </th>

                            <th class="text-center">
                                Action
                            </th>

                        </tr>

                    </thead>


                    <tbody>

                        {% for item in kimap %}

                        <tr>

                            <td class="text-center">
                                {{ forloop.counter0|add:page_obj.start_index }}
                            </td>

                            <td>
                                {{ item.classifica }}
                            </td>

                            <td>
                                {{ item.category }}
                            </td>

                            <td>
                                <strong>
                                    {{ item.kimap }}
                                </strong>
                            </td>

                            <td>
                                {{ item.name }}
                            </td>

                            <td class="text-end">
                                {{ item.qty|floatformat:4 }}
                            </td>

                            <td>
                                {{ item.uom }}
                            </td>

                            <td class="text-end">
                                {{ item.priceusd|floatformat:2 }}
                            </td>

                            <td class="text-end">
                                {{ item.totalusd|floatformat:2 }}
                            </td>

                            <td>
                                {{ item.location }}
                            </td>

                            <td>
                                {{ item.shortname }}
                            </td>

                            <td class="text-center">

                                <button type="button" class="btn btn-sm btn-secondary" data-bs-toggle="modal"
                                    data-bs-target="#kimapModal" onclick="
                                        editKIMAP(
                                            '{{ item.id }}',
                                            '{{ item.classifica|escapejs }}',
                                            '{{ item.category|escapejs }}',
                                            '{{ item.kimap|escapejs }}',
                                            '{{ item.name|escapejs }}',
                                            '{{ item.qty }}',
                                            '{{ item.uom|escapejs }}',
                                            '{{ item.priceusd }}',
                                            '{{ item.location|escapejs }}',
                                            '{{ item.shortname|escapejs }}'
                                        )
                                    ">
                                    <i class="bi bi-pencil"></i>
                                </button>


                                <form method="post" action="{% url 'delete_kimap' item.id %}" class="d-inline" onsubmit="
                                        return confirm(
                                            'Delete this Material / KIMAP?'
                                        );
                                    ">

                                    {% csrf_token %}

                                    <button type="submit" class="btn btn-sm btn-danger">
                                        <i class="bi bi-trash"></i>
                                    </button>

                                </form>

                            </td>

                        </tr>

                        {% empty %}

                        <tr>

                            <td colspan="12" class="text-center text-muted py-4">
                                No Material / KIMAP data available.
                            </td>

                        </tr>

                        {% endfor %}

                    </tbody>

                </table>

            </div>

        </div>

    </div>


    <!-- =====================================================
         PAGINATION
         ===================================================== -->

    {% if paginator.num_pages > 1 %}

    <nav class="mt-3">

        <ul class="pagination justify-content-center">

            {% if page_obj.has_previous %}

            <li class="page-item">

                <a class="page-link"
                    href="?search={{ search_query|urlencode }}&page={{ page_obj.previous_page_number }}">
                    Previous
                </a>

            </li>

            {% endif %}


            <li class="page-item active">

                <span class="page-link">
                    {{ page_obj.number }}
                    /
                    {{ paginator.num_pages }}
                </span>

            </li>


            {% if page_obj.has_next %}

            <li class="page-item">

                <a class="page-link" href="?search={{ search_query|urlencode }}&page={{ page_obj.next_page_number }}">
                    Next
                </a>

            </li>

            {% endif %}

        </ul>

    </nav>

    {% endif %}

</div>


<!-- =========================================================
     ADD / EDIT MODAL
     ========================================================= -->

<div class="modal fade" id="kimapModal" tabindex="-1">

    <div class="modal-dialog modal-xl">

        <div class="modal-content">

            <form method="post" action="{% url 'save_kimap' %}">

                {% csrf_token %}

                <input type="hidden" name="kimap_id" id="kimap_id">


                <div class="modal-header">

                    <h5 class="modal-title" id="kimapModalTitle">
                        Add Material / KIMAP
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                </div>


                <div class="modal-body">

                    <!-- =====================================
                         GENERAL INFORMATION
                         ===================================== -->

                    <div class="card mb-3">

                        <div class="card-header fw-bold">
                            General Information
                        </div>

                        <div class="card-body">

                            <div class="row">

                                <!-- <div class="col-md-6 mb-3">

                                    <label class="form-label">
                                        Classification
                                    </label>

                                    <input type="text" class="form-control" name="classifica" id="classifica" required>

                                </div> -->
                                <div class="col-md-6">
                                    <label for="classification" class="form-label">
                                        Classification
                                    </label>

                                    <select class="form-select" id="classification" name="classification" required>

                                        <option value="">-- Select Classification --</option>
                                        <option value="CAPITAL">CAPITAL</option>
                                        <option value="NON CAPITAL">NON CAPITAL</option>

                                    </select>
                                </div>

                                <div class="col-md-6 mb-3">

                                    <label class="form-label">
                                        Category
                                    </label>

                                    <select class="form-select" name="category" id="category" required>
                                        <option value="">-- Select Category --</option>

                                        {% for item in categories %}
                                        <option value="{{ item.category }}">
                                            {{ item.category }}
                                        </option>
                                        {% endfor %}
                                    </select>

                                </div>


                                <div class="col-md-6 mb-3">

                                    <label class="form-label">
                                        KIMAP
                                    </label>

                                    <input type="text" class="form-control" name="kimap" id="kimap" required>

                                </div>


                                <div class="col-md-6 mb-3">

                                    <label class="form-label">
                                        Name
                                    </label>

                                    <input type="text" class="form-control" name="name" id="name" required>

                                </div>


                                <div class="col-md-6 mb-3">

                                    <label class="form-label">
                                        Short Name
                                    </label>

                                    <input type="text" class="form-control" name="shortname" id="shortname">

                                </div>

                            </div>

                        </div>

                    </div>


                    <!-- =====================================
                         QUANTITY & PRICE
                         ===================================== -->

                    <div class="card mb-3">

                        <div class="card-header fw-bold">
                            Quantity & Price
                        </div>

                        <div class="card-body">

                            <div class="row">

                                <div class="col-md-3 mb-3">

                                    <label class="form-label">
                                        Qty
                                    </label>

                                    <input type="number" step="0.0001" class="form-control" name="qty" id="qty"
                                        value="0" oninput="calculateTotal()">

                                </div>


                                <div class="col-md-3 mb-3">

                                    <label class="form-label">
                                        UOM
                                    </label>

                                    <input type="text" class="form-control" name="uom" id="uom">

                                </div>


                                <div class="col-md-3 mb-3">

                                    <label class="form-label">
                                        Price USD
                                    </label>

                                    <input type="number" step="0.0001" class="form-control" name="priceusd"
                                        id="priceusd" value="0" oninput="calculateTotal()">

                                </div>


                                <div class="col-md-3 mb-3">

                                    <label class="form-label">
                                        Total USD
                                    </label>

                                    <input type="number" step="0.0001" class="form-control" name="totalusd"
                                        id="totalusd" value="0" readonly>

                                </div>

                            </div>

                        </div>

                    </div>


                    <!-- =====================================
                         LOCATION
                         ===================================== -->

                    <div class="card">

                        <div class="card-header fw-bold">
                            Location
                        </div>

                        <div class="card-body">

                            <label class="form-label">
                                Location
                            </label>

                            <input type="text" class="form-control" name="location" id="location" required>

                        </div>

                    </div>

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-primary">
                        <i class="bi bi-save"></i>
                        Save Material
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


<!-- =========================================================
     IMPORT MODAL
     ========================================================= -->

<div class="modal fade" id="importModal" tabindex="-1">

    <div class="modal-dialog">

        <div class="modal-content">

            <form method="post" action="{% url 'upload_excel_kimap' %}" enctype="multipart/form-data">

                {% csrf_token %}

                <div class="modal-header">

                    <h5 class="modal-title">
                        Import Material / KIMAP
                    </h5>

                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>

                </div>


                <div class="modal-body">

                    <label class="form-label">
                        Excel File
                    </label>

                    <input type="file" name="excel_file" class="form-control" accept=".xlsx" required>

                    <div class="form-text mt-2">

                        Excel columns must be:

                        <br>

                        No, Classification, Category, KIMAP,
                        Name, Qty, UOM, Price USD,
                        Total USD, Location, Short Name

                    </div>

                </div>


                <div class="modal-footer">

                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                        Cancel
                    </button>

                    <button type="submit" class="btn btn-primary">
                        Import
                    </button>

                </div>

            </form>

        </div>

    </div>

</div>


<script>

    function newKIMAP() {

        document.getElementById(
            'kimapModalTitle'
        ).innerText =
            'Add Material / KIMAP';

        document.getElementById(
            'kimap_id'
        ).value = '';

        document.getElementById(
            'classification'
        ).value = '';

        document.getElementById(
            'category'
        ).value = '';

        document.getElementById(
            'kimap'
        ).value = '';

        document.getElementById(
            'name'
        ).value = '';

        document.getElementById(
            'qty'
        ).value = '0';

        document.getElementById(
            'uom'
        ).value = '';

        document.getElementById(
            'priceusd'
        ).value = '0';

        document.getElementById(
            'totalusd'
        ).value = '0';

        document.getElementById(
            'location'
        ).value = '';

        document.getElementById(
            'shortname'
        ).value = '';
    }


    function editKIMAP(
        id,
        classifica,
        category,
        kimap,
        name,
        qty,
        uom,
        priceusd,
        location,
        shortname
    ) {

        document.getElementById(
            'kimapModalTitle'
        ).innerText =
            'Edit Material / KIMAP';

        document.getElementById(
            'kimap_id'
        ).value = id;

        document.getElementById(
            'classification'
        ).value = classifica;

        document.getElementById(
            'category'
        ).value = category;

        document.getElementById(
            'kimap'
        ).value = kimap;

        document.getElementById(
            'name'
        ).value = name;

        document.getElementById(
            'qty'
        ).value = qty;

        document.getElementById(
            'uom'
        ).value = uom;

        document.getElementById(
            'priceusd'
        ).value = priceusd;

        document.getElementById(
            'location'
        ).value = location;

        document.getElementById(
            'shortname'
        ).value = shortname;

        calculateTotal();
    }


    function calculateTotal() {

        const qty =
            parseFloat(
                document.getElementById(
                    'qty'
                ).value
            ) || 0;

        const price =
            parseFloat(
                document.getElementById(
                    'priceusd'
                ).value
            ) || 0;

        document.getElementById(
            'totalusd'
        ).value =
            (qty * price).toFixed(4);
    }

</script>

{% endblock %}